<template>
	<div class="pc">
		
		
		<div class="msg">{{msg}}</div>
		<div class="iconfont icon-caret-right"></div>
		<div class="avatar">
			<img :src="avatar" alt="" />
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			avatar: this.$store.getters.avatar
		};
	},
	props:{
		msg:{
			type:String,
			default:''
		}
	}
};
</script>

<style lang="less" scoped>
.pc {
	display: flex;
	justify-content: flex-end;
	padding-left: 10rpx;
	width: 100%;

	.avatar {
		height: 100rpx;
		width: 100rpx;
		border-radius: 50rpx;
		overflow: hidden;
		img {
			height: 100%;
			width: 100%;
			object-fit: cover;
		}
	}
	.iconfont {
		color: #fff;
		font-size: 60rpx;
		line-height: 100rpx;
	}
	.msg {
		padding: 30rpx 20rpx;
		margin-right: -20rpx;
		line-height: 40rpx;
		border-radius: 10rpx;
		background-color: #fff;
		word-wrap: break-word;
		font-size: 40rpx;
		max-width: calc(100vw - 150rpx);
	}
}
</style>
